<template>
    <div>
        <div class="collect_main" v-if="collecList">
			<div v-for="item in collecList" class="collect_box">
				<el-popover placement="top" width="160" v-model="item.visible" trigger="click">
					<p>确定删除吗？</p >
				    <div style="text-align: right; margin: 0">
				        <el-button type="primary" size="mini" @click="delCollect(item.product_id)">确定</el-button>
				   	</div>
					<span slot="reference" @click="item.visible = true" class="sp_del">×</span>
              <my-list :listData="collecList" :ismore="true"></my-list>
				</el-popover>
                </div>
                <div class="collect_main" v-if="!collectList">
			<div>
				<img src="../../assets/imgs/cart-empty.png" alt="">
			</div>
		</div>
    </div>
</template>
<script>
import API from '../api/collect'
export default {
    data() {
        return {
            collecList:[]
        }
    },
     created() {
        this.getCollect()
    },
    methods: {
        async getCollect(){
            let res=await API.collectList({"user_id":this.$store.state.user_id})
            this.collecList=res.collectList
         }
    },
}
</script>
<style lang="scss" scoped>
    	.collect_main{
		width: 1225px;
		min-height: 400px;
		margin: 0 auto;
	}
	.collect_box{
		float: left;
		margin-left: 20px;
		background-color:white;
		margin-top: 20px;
	}
	.collect_box:hover{
		transform: translateY(-5px);
		box-shadow:0px 10px 10px #B0B0B0;
	}
	.sp_del{
		font-size: 20px;
		position: relative;
		left: 205px;
	}
</style>